import { createBrowserRouter } from 'react-router-dom'
import Catalog from '../pages/catalog'
import Product from '../pages/product'

import Root from '../components/root'
import Page404 from '../pages/page404'
import Home from '../pages/home'
import Profile from '../pages/profile/profile'
import ProfileEdit from '../pages/profile/profileEdit'
import Favorites from '../pages/favorites'
import { SignUpForm } from '../components/forms/signUpForm'
import { SignInForm } from '../components/forms/signInForm'
import Cart from '../pages/cart'

export const routerConfig = [
	{
		path: '/',
		element: <Root />,
		errorElement: <Page404 />,
		children: [
			{
				index: true,
				element: <Home />,
				errorElement: <Page404 />,
			},
			{
				path: 'catalog',
				element: <Catalog />,
				errorElement: <Page404 />,
			},
			{
				path: 'product/:productId',
				element: <Product />,
				errorElement: <Page404 />,
			},
			{
				path: 'profile',
				children: [
					{
						index: true,
						element: <Profile />,
						errorElement: <Page404 />,
					},
					{
						path: 'edit',
						element: <ProfileEdit />,
						errorElement: <Page404 />,
					},
				],
				errorElement: <Page404 />,
			},
			{
				path: 'favorites',
				element: <Favorites />,
				errorElement: <Page404 />,
			},
			{
				path: 'cart',
				element: <Cart />,
				errorElement: <Page404 />,
			},
			{
				path: 'signup',
				element: <SignUpForm />,
				errorElement: <Page404 />,
			},
			{
				path: 'signin',
				element: <SignInForm />,
				errorElement: <Page404 />,
			},
			{
				path: '*',
				element: <Page404 />,
			},
		],
	},
]

export const router = createBrowserRouter(routerConfig)
